<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="vue.min.js"></script>
</head>
<body>
<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
  <button v-on="click:clickBtn">clickBtn</button>
</div>
<script>
  var demo = new Vue({
    el: '#demo',
    data: {
      title: 'todos',
      todos: [
        {
          done: true,
          content: 'learn js'
        },
        {
          done: false,
          content: 'learn vue.js'
        }
      ]
    },
    methods: {
      clickBtn(){
        //console.log(this.$el);// 获取 #demo 这个节点 包括所有子节点
        console.log(this.$data);
        /**
         * {__ob__: i}
         title: "todos"
         todos: Array(2)
         __ob__: i {value: {…}, dep: i, vms: Array(1)}
         get title: ƒ ()
         set title: ƒ (t)
         get todos: ƒ ()
         set todos: ƒ (t)
         [[Prototype]]: Object
         */
      }
    }
  })
</script>
</body>
</html>